<script setup>
import { useRoute } from 'vue-router'
import ArticleList from './article-list/index.vue'

const activeName = ref('recommend')
const route = useRoute()

function handleClick(tab) {
  if (tab.paneName === 'news') {
    activeName.value = 'news'
  }
  else {
    activeName.value = 'recommend'
  }
}

console.log('当前路由', route.name)
</script>

<template>
  <AppCard bordered class="wh-full border-rd-5 p-12 us">
    <el-tabs v-model="activeName" class="h-full" @tab-click="handleClick">
      <el-tab-pane label="推荐" name="recommend">
        <ArticleList
          v-if="activeName === 'recommend'"
          :m-tag="route.meta.title"
          type="recommend"
        />
      </el-tab-pane>
      <el-tab-pane label="最新" name="news">
        <ArticleList
          v-if="activeName === 'news'"
          :m-tag="route.meta.title"
          type="news"
        />
      </el-tab-pane>
    </el-tabs>
  </AppCard>
</template>

<style scoped></style>
